<%@ page import="dao.UserInfoDao" %>
<%@ page import="dao.impl.UserInfoDaoImpl" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.List" %><%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/3/23
  Time: 9:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsp/jstl/fmt" %>

<html>
<head>
    <title>成功页面</title>
    <link rel="stylesheet" href="./static/layui/css/layui.css">
    <script src="./static/layui/layui.all.js"></script>
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="detail">删除</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail">修改</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">添加</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="getCheckData">批量删除</button>

    </div>
</script>
</body>
<script>
    layui.use(['layer', 'form', 'table','util'], function () {
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 500
            ,url: "userinfo?method=findAllJson" //数据接口
            ,page: true //开启分页
            ,toolbar: '#toolbarDemo'
            //开启后端排序
            ,autoSort:false
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'},
                {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
                ,{field: 'username', title: '用户名',edit: 'text',sort: true, width:120}
                ,{field: 'password', title: '密码', width:120, sort: true}
                ,{field: 'phone', title: '手机号',edit: 'text', width:120}
                ,{field: 'createtime', title: '创建时间',edit: 'text', width:160}
                ,{fixed: 'right', title: '操作', width: 180, align:'center', toolbar: '#barDemo'}
            ]]
        });

        table.on('edit(test)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            console.log(obj)
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改值为：'+ util.escape(value));
        });
        table.on('sort(test)', function(obj){ //注：sort 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('demo', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });

        //头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id);
            switch(obj.event){
                case 'getCheckData':
                    var data = checkStatus.data;
                    layer.alert(JSON.stringify(data));
                    break;
                case 'getCheckLength':
                    var data = checkStatus.data;
                    layer.msg('选中了：'+ data.length + ' 个');
                    break;
                case 'isAll':
                    layer.msg(checkStatus.isAll ? '全选': '未全选');
                    break;

                //自定义头工具栏右侧图标 - 提示
                case 'LAYTABLE_TIPS':
                    layer.alert('这是工具栏右侧自定义的一个图标按钮');
                    break;
            };
        });
    });
</script>
</body>
</html>
